<template>
  <div>
    <div class="title" :class="{ black: istodo, green: !istodo }">
      <slot name="title" />
      <i class="i" :class="istodo ? 'todo_i' : 'done_i'">{{ num }}</i>
    </div>
    <div :class="istodo ? 'todo_items' : 'done_items'" class="items">
      <my-item
        v-for="item in filter_list"
        :key="item.id"
        :item="item"
        @del="del"
      />
    </div>
  </div>
</template>

<script setup>
const $props = defineProps({
  thekey: {
    type: String,
    required: true,
  },
  list: {
    type: Array,
    required: true,
  },
});
const $emits = defineEmits(["del"]);
const istodo = $props.thekey === "todo";
const filter_list = computed({
  get() {
    if ($props.thekey === "todo") {
      return $props.list.filter((item) => item.isSelected === false);
    } else {
      return $props.list.filter((item) => item.isSelected === true);
    }
  },
});
const num = computed(() => {
  return filter_list.value.length;
});
const del = (id) => {
  $emits("del", id);
};
</script>

<style lang="scss" scoped>
.black {
  color: #333;
}
.green {
  color: #6cc347;
}
.i {
  display: inline-block;
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.todo_i {
  background-color: #f4f4f5;
  border: 1px solid #333;
}
.done_i {
  background-color: #f0f9eb;
  border: 1px solid #6cc347;
}
.items {
  :deep(.isSelected) {
    cursor: pointer;
    position: relative;
    width: 15px;
    height: 15px;
    font-size: 14px;
    &::after {
      position: absolute;
      top: 0;
      color: #333;
      width: 15px;
      height: 15px;
      display: inline-block;
      visibility: visible;
      padding-left: 0px;
      text-align: center;
      content: " ";
      border-radius: 3px;
      // background-color: #6528e0;
    }
  }
}
.done_items {
  color: #6528e0;
  :deep(.isSelected) {
    &:checked::after {
      content: "✓";
      color: #fff;
      font-size: 12px;
      // font-weight: bold;
      background-color: #6528e0;
    }
  }
}
</style>
